@import '../../../../../theme//mixins/amixin';
.builder-list {
  height: 100%;
  overflow-x: hidden !important;
  scroll-behavior: smooth;

  .wrapper {
    display: flex;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    .load {
      @include middle-center();
      z-index: 9999;
    }
    #builder-list {
      flex: 1 1 auto;
      overflow: auto;
      padding-bottom: 150px;
    }
  }
  .component-item {
    position: relative;
    min-height: 66px;
    .add-new-section {
      position: absolute;
      z-index: 0;
      opacity: 0;
      left: 50%;
      bottom: -18px;
      transform: translateX(-50%);
    }
    &:hover {
      .add-new-section {
        opacity: 1;
        z-index: 999;
      }
    }
    ::ng-deep {
      .active-toolbar {
        position: relative;
        display: block;
        box-sizing: content-box;
        padding: 2px;
        &:hover {
          z-index: 10;
          outline-offset: -2px;
          > .component-toolbar {
            display: block !important;
          }
        }
        > .component-toolbar {
          position: absolute;
          left: 0;
          top: 0px;
          width: 100%;
          z-index: 999;
          line-height: 1;
        }
      }
    }
  }

  .actions {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
  }

  .iframe-wrapper {
    display: none;
    width: 100%;
    height: 100%;
    .preview-iframe {
      max-height: 94%;
    }
  }

  .preview {
    height: 100%;
    #builder-list {
      display: none;
      flex: 0 0 auto;
    }
    .iframe-wrapper {
      display: block;
      position: relative;
    }
    .preview-iframe {
      &:after {
        content: '';
        position: absolute;
        display: block;
        border-radius: 54px;
        left: -12px;
        top: -12px;
        right: -12px;
        bottom: -12px;
        z-index: -1;
      }
      ::ng-deep iframe {
        width: 100%;
        height: 100%;
        border-radius: 38px;
      }
    }
  }

  .preview-xs,
  .preview-xs-md {
    .preview-iframe {
      width: 375px;
      height: 812px;
      max-width: calc(100% - 24px);
    }
  }
  .preview-sm {
    .preview-iframe {
      width: 768px;
      height: 1024px;
    }
  }
  .preview-md {
    .preview-iframe {
      width: 1280px;
      height: 800px;
    }
  }

  .preview-xs-md {
    #builder-list {
      display: block;
      flex: 0 0 70%;
      overflow-x: auto;
    }
    .iframe-wrapper {
      flex: 0 0 30%;
    }
  }

  .preview-iframe {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
  }
}
